<template>
	<a-modal
		:centered="true"
		class="boxes-info-os-time"
		:open="props.visible"
		:body-style="{ padding: '40px 32px' }"
		width="416px"
		title="系统时间"
		ok-text="更改"
		:confirm-loading="loading"
		@cancel="onClose"
		@ok="onSubmitTime"
	>
		<a-form ref="timeFormRef" :model="timeForm" layout="vertical">
			<a-form-item label="同步模式" name="timeFlag" class="hide-required" :rules="[{ required: true, message: '请输入系统名称' }]">
				<a-radio-group v-model:value="timeForm.timeFlag">
					<a-radio :value="0">本机时间</a-radio>
					<a-radio :value="1">手动选择</a-radio>
				</a-radio-group>
			</a-form-item>
			<!-- <a-form-item v-if="timeForm.timeFlag === 2" name="time" :rules="[{ required: true, message: '请选择时间' }]"> -->
			<div v-if="timeForm.timeFlag === 1">
				<a-date-picker
					v-model:value="date"
					show-time
					style="width: 100%; margin-top: 24px"
					format="YYYY-MM-DD HH:mm:ss"
					placeholder="请选择时间"
				>
					<template #suffixIcon> <ClockCircleOutlined /></template>
				</a-date-picker>
			</div>
			<!-- </a-form-item> -->
		</a-form>
	</a-modal>
</template>

<script setup lang="ts" name="BoxInfoOsTime">
import { FormInstance } from 'ant-design-vue';
import { g6RegValidate } from 'glasssix-utils-ts';
import { BoxManageApi } from '../../../api';

import dayjs from 'dayjs';
type _Props = {
	id: string;
	visible: boolean;
};
const props = withDefaults(defineProps<_Props>(), {
	id: '',
	visible: false
});

const emits = defineEmits<{
	(e: 'ok'): void;
	(e: 'close'): void;
}>();

const $message: any = inject('$message');

/**
 * 更改系统时间
 */
const date = ref<string>('');

const timeFormRef = ref<FormInstance>();
const timeForm = reactive({
	timeFlag: 0,
	// 设置默认当前时间
	systemTime: ''
});

const loading = ref<boolean>(false);
const onClose = (): void => {
	timeFormRef.value?.resetFields();
	emits('close');
};
const onSubmitTime = async (): Promise<void> => {
	loading.value = true;
	try {
		g6RegValidate.formSubmit(timeFormRef.value, async () => {
			await timeFormRef.value?.validate();
			if (timeForm.timeFlag === 0) {
				timeForm.systemTime = dayjs(dayjs()).format('YYYY-MM-DD HH:mm:ss');
			} else {
				timeForm.systemTime = dayjs(date.value).format('YYYY-MM-DD HH:mm:ss');
			}
			const param = {
				...timeForm,
				id: props.id
			};
			console.log('timeFormRef:', timeForm);
			const res: TsRes = await BoxManageApi.updateBoxTime(param);
			console.log('res:', res);

			// await runUpdateTime(dayjs(timeForm.time).format('YYYY-MM-DD HH:mm:ss'));
			if (res?.code === 0) {
				$message.success('操作成功');
				onClose();
				emits('ok');
				loading.value = false;
			}
		});
	} catch (error) {
		console.error(error);
	}
};
</script>

<style lang="less" scoped>
// 弹窗
.boxes-info-os-time {
	.name-form {
		.ant-form-item-required {
			&::after {
				display: none;
			}
		}
	}
}
</style>
